<template>
  <div class="cart">
    <van-swipe-cell
      v-for="prod in cart"
      :key="prod.id"
    >
      <van-card
        :num="prod.amount"
        :price="prod.price"
        :desc="prod.desc"
        :title="prod.title"
        class="goods-card"
        :thumb="prod.img"
      >
       <template #thumb>
          <van-checkbox :value="prod.checked"  @click="toggleCartItem(prod.id)" style="margin-right: 4px;" ></van-checkbox>
          <div data-v-7698a586="" class="van-image" style="width: 88px; height: 88px;">
            <img :src="prod.img" class="van-image__img" style="object-fit: cover;">
          </div>
        </template>
        <template #num>
          <van-stepper :value="prod.amount" theme="round" button-size="22"  @change="changeItemNumHandler(prod.id,$event)"/>
        </template>
      </van-card>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="deletedItemCart(prod.id)"/>
      </template>
    </van-swipe-cell>

    <van-submit-bar :price="totalPrice" button-text="提交订单">
      <van-checkbox :value="getAll" @click=" toggleAllChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapState } from 'vuex'
export default {
  name: 'Cart',
  computed: {
    // 通常将 vuex 的 state 中的数据和 getter 计算出的数据映射到组件的 computed 计算属性中
    ...mapGetters(['getAll', 'totalPrice']),
    ...mapState({
      cart: state => state.cart.cart
    })
    // cart() {
    //   return this.$store.state.cart.cart
    // },
    // checkedAll() {
    //   return this.$store.getters.getAll
    // },
    // getTotal() {
    //   return this.$store.getters.totalPrice
    // }
  },
  methods: {
    ...mapMutations(['changeCartItemAmount', 'toggleCartItem', 'toggleAllCart', 'deletedItemCart']),
    changeItemNumHandler(id, value) {
      console.log(id, value)
      this.changeCartItemAmount({
        id,
        amount: value
      })
      // this.$store.commit('changeCartItemAmount', {
      //   id,
      //   amount: value
      // })
    },
    // toggleCartItemHandler(id) {
    //   this.$store.commit('toggleCartItem', id)
    // },
    toggleAllChecked() {
      this.$store.commit('toggleAllCart', !this.checkedAll)
    }
    // removeItemHandler(id) {
    //   this.$store.commit('deletedItemCart', id)
    // }
  }
}
</script>

<style lang="scss" scoped>
 .van-card__thumb {
    width: 110px;
    height: 88px;
    display: flex;
  }
</style>
